
Vue.component('tabs',{


    template: `

    <div>

<div class="tabs">
  <ul>

<!-- 如果 tab.isActive为true,值为is-active-->
    <li v-for="tab in tabs" :class="{'is-active':tab.isActive}">
     <a href="#" @click="selectedTab(tab)"> {{ tab.name }} </a> 
     </li>
  </ul>
</div>


<!-- 详细 -->
<div class="tabs-details"> 
<slot></slot>
</div>

    </div>


`,

mounted() {

    console.log(this.$children);
},

created() {

    this.tabs=this.$children;
},


data () {
    return {
    tabs:[]

    };
},

methods: {

selectedTab(selectedTab) {


this.tabs.forEach (tab => {

tab.isActive = (selectedTab.name == tab.name);

});

}


}



});




Vue.component('tab',{

props:{

    name: {required:true},
    selected: { default:false}

},

    template: `

<div v-show="isActive"> 
<slot></slot>
</div>

`,


//vue不提倡直接改变属性的值,需要使用计算属性或用一个变量去绑定
data() {

return {
    isActive : false,
};
},

mounted() {

this.isActive=this.selected;

}

});



/*
*
* 为了演示,操作同一个变量, 把root定义写到这里,根据'谁用谁管理'的原则一般写到外面

* */

new Vue({

    el:'#root',

});
